import React from "react";
import DOMPurify from "dompurify";
import { Modal, Image } from "antd";
import { formatDateTime } from "@/utils/timeFormat";

interface PostViewProps {
  open: boolean;
  onClose: () => void;
  post: {
    title: string;
    content: string;
    cover?: string;
    author?: string;
    createdAt?: string;
    CreatedAt?: string;
    create_time?: string;
    created_time?: string;
    ctime?: string;
    time?: string;
    date?: string;
    [key: string]: any;
  };
}

const PostView: React.FC<PostViewProps> = ({ open, onClose, post }) => {
  const formattedTime = formatDateTime(post);

  return (
    <Modal
      open={open}
      onCancel={onClose}
      footer={null}
      title={null}
      width={800}
      centered
      styles={{ body: { padding: 0 } }}
    >
      <div style={{ padding: 32 }}>
        <h1 style={{ textAlign: "center", fontSize: 28, fontWeight: 700, marginBottom: 24 }}>{post.title}</h1>
        {post.cover && (
          <div style={{ textAlign: "center", marginBottom: 24 }}>
            <Image src={post.cover} alt="封面" width={320} style={{ borderRadius: 8 }} />
          </div>
        )}
        <div style={{ textAlign: "center", color: "#888", marginBottom: 32, fontSize: 14 }}>
          {post.author && <span>作者：{post.author}</span>}
          {post.author && formattedTime && <span style={{ margin: "0 8px" }}>|</span>}
          {formattedTime && <span>发布时间：{formattedTime}</span>}
        </div>
        <div
          style={{ fontSize: 16, lineHeight: 2, color: "#222", minHeight: 120 }}
          dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(post.content || "") }}
        />
      </div>
    </Modal>
  );
};

export default PostView; 